<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${pageTitle}"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        .changeBtnArea{margin-top:10px;margin-right: 10px;margin-bottom: 30px;overflow: auto;}
        .changeBtnArea>button{float: right;background-color: #689cf0;font-size: 12px;color: white;border: 0px;border-radius: 3px;height: 28px;line-height: 26px;padding: 0px 10px;cursor: pointer;}
        button:focus{outline:0;}
        .title-div{height: 70px; }
        input:focus{outline: 0;}
        .title-div>div{height: 35px;text-align: center;font-size: 12px;font-weight: 600;line-height: 35px;}
        .title-div>.div-one>span:first-child{margin-right: 20px;}
        .title-div>.div-one>span:last-child{color: #859CBC;}
        .title-div>div>i{display: inline-block;width: 2px;height: 2px;background-color: #B1B9C4;margin-left: 5px;border-radius: 1px;margin-bottom: 3px;}
        .title-div>.div-tow>span{width: 18px;height: 18px;line-height: 18px;text-align: center;color: white;border-radius: 9px;background-color:#5FA3FA;display: inline-block;}
        .title-div>div>i:last-child{width: 8px;height: 8px;border-radius: 4px;margin-bottom: 0px;}
        .head,.head>h4{clear: right;text-align: center;}
        body{margin: 0px;padding: 0px;}
        .form>div{height: 35px;line-height: 35px;border-bottom: 1px solid #ddd;margin: 20px 10%;}
        .form>div>label{width: 26%;display: inline-block;text-align: justify;text-align-last: justify;font-size: 14px;}
        .form>div>input{width: 60%;border: 0px;line-height: 25px;padding-left: 10px;font-size: 14px;outline:none;padding-right: 20px;background-image:url(data:image/png;iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDY2OEMyMzc1RjdGMTFFQTlCNTBENjlFQTYyN0ZDNDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDY2OEMyMzg1RjdGMTFFQTlCNTBENjlFQTYyN0ZDNDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NjY4QzIzNTVGN0YxMUVBOUI1MEQ2OUVBNjI3RkM0MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NjY4QzIzNjVGN0YxMUVBOUI1MEQ2OUVBNjI3RkM0MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoSsg2cAAABaUExURe3t7PPz8vDw7+np5/f39u7u7fLy8vLy8fDw8Pb29f39/fj4+PPz8+vr6vHx8e3t7fb29v39/PHx8O/v7u7u7ufn5vT08+zs6/7+/unp6Ojo5+rq6f///////50HzUwAAAAedFJOU///////////////////////////////////////AOwYHF4AAACYSURBVHjaXM5ZDoMwDEVRU4YW6Dx6eN7/NpsQAgFL/jm6skxeDu7awZ02yCZaYYPoOWhdoURWQmy7FdEwS9CLyIL4fm6YVPqMqNQmCZtvRjOTFqzn/FIym9r8J7pkZrFLiGO2+oAZV9NkAfO9pYv42HcRG5ntlM0JL9mb0zDbczWnMaDUei3MqVWRthlKc/q9R95ImL8AAwBADCdxtMCCuwAAAABJRU5ErkJggg==) no-repeat scroll right center transparent; }
        .btn{height: 35px;line-height: 35px;margin: 20px 10%;margin-top: 20px;}
        .btn>input{font-size: 14px;background-color:#689cf0;color: white;border:0px;border-radius:18px;height: 35px;line-height: 35px;width: 100%;cursor: pointer; }
        .msg{height: 30px;line-height: 28px;margin: 0px 10%;text-align: center;font-size: 12px;color: red;  }
    </style>
</head>
<body th:style="'background-color:'+${page_bg_color}">
<div>
    <div class="changeBtnArea">
        <button id='toOCR' onclick="toOCR()" th:style="'background-color:'+${text_bg_color}">身份证拍照</button>
    </div>
    <div style="position: absolute; top: 2px; left: 2px;">
        <button onclick="logout()" style="background-color: transparent; border: none; font-size: 24px;">✕</button>
    </div>
    <div class="title-div">
        <div class="div-one"><span>身份信息录入</span><span>人脸核验</span></div>
        <div class="div-tow">
            <span th:style="'background-color:'+${text_bg_color}">1</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i th:style="'background-color:'+${text_bg_color}"></i>
        </div>
    </div>
    <div class="head">
        <h4>信息录入</h4>
    </div>
    <form action="getInputData" method="post" onsubmit="return false;">
        <div class="form">
            <div><label>姓名</label>:<input id="id_name" name="id_name" value="" onfocus="clearMsg()" /></div>
            <div><label>身份证号</label>:<input id="id_number" name="id_number" value="" onfocus="clearMsg()" /></div>
        </div>
        <div class="msg">

        </div>
        <div class="btn">
            <input th:style="'background-color:'+${text_bg_color}" value="开始认证" type="button" onclick="submitTo()">
        </div>
    </form>
</div>

</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecompress.js"></script>
<script type="text/javascript" src="comm.js"></script>
<script>
    $(function() {
        let openOcr = InputUserInfo.isOpenOcr() == "true";
        putLog(InputUserInfo.isOpenOcr())
        if(!openOcr){
            $(".changeBtnArea").hide();
        }
    });
      
    function updateIDAndName(id, name) {
        $("#id_number").attr("value", id);
        $("#id_name").attr("value", name);
    }

    function clearMsg() {
        $(".msg").text("");
    }

    function submitTo() {
        var id_name = $("#id_name").val();
        //符号点替换为字符点
        id_name = id_name.replace("•","·");
        var id_number = $("#id_number").val();
        if(id_name == null || id_name == undefined || id_name == ""){
            $(".msg").text("姓名不可为空。")
            return false;
        }

        var reg = /^[\u4e00-\u9fa5]{1,8}(·[\u4e00-\u9fa5]{1,8}){0,2}$/;
        if(!reg.test(id_name)){
            $(".msg").text("姓名不合法。")
            return false;
        }
        if(id_number == null || id_number == undefined || id_number == ""){
            $(".msg").text("身份证号不可为空。")
            return false;
        }

        if(!checktheform(id_number)){
            $(".msg").text("身份证号不合法。")
            return false;
        }

        var token = getToken();
        putLog(token);
        // 上传更新身份证，姓名
        InputUserInfo.uploadIDAndName(id_number, id_name, token, resStr=>{
            putLog(resStr);
            InputUserInfo.RPVAuthn();
        });
        
    }

    function toOCR() {
        window.location.href="input_user_info_back.html";
    }

    function logout(){
        const Http = new XMLHttpRequest();
        const url='http://127.0.0.1:32195/exit';
        Http.open("POST", url);
        Http.send();
    }

    /**
     * 身份证校验算法
     */
    var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
        21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",
        33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",
        42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
        51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",
        63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
    };
    function checktheform(card) {
        //是否为空
        if(card === '') {
            return false;
        }
        //校验长度，类型
        if(isCardNo(card) === false){
            return false;
        }
        //检查省份
        if(checkProvince(card) === false){
            return false;
        }
        //校验生日
        if(checkBirthday(card) === false){
            return false;
        }
        //检验位的检测
        if(checkParity(card) === false){
            return false;
        }
        return true;
    };

    //检查号码是否符合规范，包括长度，类型
    isCardNo = function(card){
        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
        if(reg.test(card) === false){
            return false;
        }
        return true;
    };

    //取身份证前两位,校验省份
    checkProvince = function(card){
        var province = card.substr(0,2);
        if(vcity[province] == undefined){
            return false;
        }
        return true;
    };

    //检查生日是否正确
    checkBirthday = function(card){
        var len = card.length;
        //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
        if(len == '15'){
            var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
            var arr_data = card.match(re_fifteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date('19'+year+'/'+month+'/'+day);
            return verifyBirthday('19'+year,month,day,birthday);
        }

        //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
        if(len == '18'){
            var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
            var arr_data = card.match(re_eighteen);
            var year = arr_data[2];
            var month = arr_data[3];
            var day = arr_data[4];
            var birthday = new Date(year+'/'+month+'/'+day);
            return verifyBirthday(year,month,day,birthday);
        }
        return false;
    };

    //校验日期
    verifyBirthday = function(year,month,day,birthday){
        var now = new Date();
        var now_year = now.getFullYear();
        //年月日是否合理
        if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day){
            //判断年份的范围（3岁到100岁之间)
            var time = now_year - year;
            if(time >= 3 && time <= 100){
                return true;
            }
            return false;
        }
        return false;
    };

    //校验位的检测
    checkParity = function(card){
        //15位转18位
        card = changeFivteenToEighteen(card);
        var len = card.length;
        if(len == '18'){
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i, valnum;
            for(i = 0; i < 17; i ++){
                cardTemp += card.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[cardTemp % 11];
            if (valnum == card.substr(17, 1)){
                return true;
            }
            return false;
        }
        return false;
    };

    //15位转18位身份证号
    changeFivteenToEighteen = function(card){
        if(card.length == '15'){
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var cardTemp = 0, i;
            card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
            for(i = 0; i < 17; i ++){
                cardTemp += card.substr(i, 1) * arrInt[i];
            }
            card += arrCh[cardTemp % 11];
            return card;
        }
        return card;
    };
</script>
</html>
